<template>
  <div class="app-container">
    <!--搜索-->
    <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
      <el-form-item label="日期：">
        <el-date-picker
          v-model="listQuery.profitMonth"
          type="month"
          format="yyyy 年 MM 月"
          value-format="yyyy-MM"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="人员：">
        <el-select v-model="listQuery.userId" filterable clearable>
          <el-option
            v-for="item in userOptionList"
            :key="item.userId"
            :label="item.userName"
            :value="item.userId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="归属采销组：">
        <el-select v-model="listQuery.groupName" filterable clearable>
          <el-option
            v-for="(item,index) in groupSetList"
            :key="index"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="归属部门：">
        <el-cascader
          v-model="listQuery.departmentId"
          :options="data2"
          :props="{value:'departmentId',label:'departmentName',emitPath:false}"
          clearable>
        </el-cascader>
      </el-form-item>

      <el-form-item>
        <el-button
          @click="handleSearchList()"
          type="primary">
          查询
        </el-button>
      </el-form-item>
    </el-form>
    <div style="font-size:14px;line-height: 30px;padding:10px 0 ">
      采销毛利汇总：<span style="font-weight: bold">{{ allPSProfit }}</span>元 <span style="padding-left:20px">完结吨数合计：<span style="font-weight: bold">{{ allDeliverNum }}</span>元</span>
    </div>
    <div class="table-container" style="margin-top:0">
      <el-table
        v-loading="listLoading"
        :data="tableData"
        border
        style="width: 100%;">
        <el-table-column  label="日期" min-width="150" align="center">
          <template slot-scope="scope">
            {{scope.row.profitMonth}}
          </template>
        </el-table-column>
        <el-table-column  label="人员" min-width="150" align="center">
          <template slot-scope="scope">
              {{scope.row.realName}}
          </template>
        </el-table-column>
        <el-table-column  label="归属采销组" min-width="150"  align="center">
          <template slot-scope="scope">
            {{scope.row.groupName}}
          </template>
        </el-table-column>
        <el-table-column  label="归属部门" min-width="150"  align="center">
          <template slot-scope="scope">
            {{scope.row.departmentName}}
          </template>
        </el-table-column>
        <el-table-column  label="采销汇总毛利" min-width="100" align="center">
          <template slot-scope="scope">
            {{scope.row.psProfit}}
          </template>
        </el-table-column>
        <el-table-column  label="完结合同总吨位" min-width="150" align="center">
          <template slot-scope="scope">
            {{scope.row.deliverNum}}
          </template>
        </el-table-column>


      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,20]"
        :total="count">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {getOrderUsersList,userProfitList} from '@/api/partner'
import {getDeptList} from '@/api/management'
import {groupSetListAPI} from '@/api/order';
import { mapGetters } from 'vuex'
import {formatDate} from '@/utils/date';
import store from '@/store'
const defaultListQuery={
  "profitMonth" : "",   //月份
  "userId" : '', //业务员ID
  "groupName" : "",//采销组
  "departmentId" : '', //部门ID
  "pageNum"   : 1,
  "pageSize"  : 10


};
export default {
  name: "index",
  data(){
    return {
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      tableData: [],
      count: 0,
      listLoading: false,
      userOptionList:[],
      roles:store.getters.roles ? store.getters.roles : [],
      data2:[],
      groupSetList:[],
      allDeliverNum:'',
      allPSProfit:''
    }
  },
  components: {

  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),



  },
  created() {
    let now = new Date();
    let nowMonth = now.getMonth(); //当前月
    let nowYear = now.getFullYear(); //当前年
    //本月的开始时间
    let monthStartDate = new Date(nowYear, nowMonth, 1);
    let startDate = formatDate(monthStartDate, 'yyyy-MM');
    this.listQuery.profitMonth = startDate
    this.getList()
    this.getUserOptionList()
    this.getBuMenList()
    this.getGroupSetList()
  },
  filters: {


  },
  methods: {
    //获取小组列表
    getGroupSetList(){
      groupSetListAPI().then((res) => {
        this.groupSetList = res.groupList;
      })
    },
    //去除不要的children
    forTree(list){
      let newList = list;
      if(newList.length){
        for (let i = 0; i<newList.length; i++){
          if(newList[i].children && newList[i].children.length > 0){
            this.forTree(newList[i].children)
          }else{
            delete newList[i].children;
          }
        }
        return newList
      }
    },

    //获取部门列表
    getBuMenList(){
      getDeptList().then((res)=>{
        this.data2 = this.forTree(res);
      })
    },
    //获取员工下拉选项
    getUserOptionList(){
      getOrderUsersList().then((res)=>{
        this.userOptionList = res;
      })
    },

    /**
     * 切换选择状态
     */
    handleSelect(key, keyPath){
      this.listQuery = JSON.parse(JSON.stringify(defaultListQuery))
      this.listQuery.tab = key;
      this.handleSearchList();
    },
    handleSizeChange(val){
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val){
      this.listQuery.pageNum = val;
      this.getList();
    },

    handleSearchList(){
      this.listQuery.pageNum = 1;
      this.getList();
    },

    //获取列表
    getList() {
      this.listLoading = true;
      userProfitList(this.listQuery).then(response => {
        this.tableData = response.list;
        this.count = response.count;
        this.listLoading = false;
        this.allDeliverNum = response.allDeliverNum;
        this.allPSProfit = response.allPSProfit;
      }).catch(()=>{
        this.listLoading = false;
      });
    },


  },
}
</script>


